<template>
  <div class="fastlogin_page">
    <header>
      <span class="icon" @click="back">取消</span>
    </header>
    <main>
      <h3>登录</h3>
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            class="tel_input"
            v-model="state.username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            class="pas_input"
            v-model="state.password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit"
            >进入你今天真好看</van-button
          >
        </div>
      </van-form>
      <div class="link_div">
        <p class="link_sp" @click="toRegister">快速注册</p>
        <p class="link_sp" @click="hint">忘记密码</p>
      </div>
      <div class="others">
        <van-divider
          :style="{
            color: '#959595',
            borderColor: '#9a9a9a',
            padding: '0 16px',
          }"
        >
          第三方登录
        </van-divider>
        <div class="wechat_logo">
          <img
            @click="toWechat"
            src="../../assets/img/register&login/l2.png"
            alt=""
          />
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { ref, reactive } from "vue";
import { getLoginApi } from "../../utils/api";
import { Toast } from "vant";
export default {
  setup() {
    const phone = ref("15770715354");
    const router = useRouter();
    const back = () => {
      router.push("/home/mine");
    };
    const toRegister = () => {
      router.push("/register");
    };
    const hint = () => {
      Toast("你再想想");
    };
    const toWechat = () => {
      Toast("功能暂未开通，请使用账号登录");
    };
    const state = reactive({
      username: "",
      password: "",
    });
    const onSubmit = () => {
      getLoginApi({
        tel: state.username,
        password: state.password,
      }).then((res) => {
        if (res.data.status === 0) {
          localStorage.setItem("account_id", state.username);
          Toast.loading({
            message: "跳转中...",
            forbidClick: true,
            loadingType: "spinner",
            duration: 300,
          });
          setTimeout(() => {
            router.push("/home/mine");
          }, 320);
        } else if (res.data.status === 2) {
          Toast("用户名不存在");
        } else if (res.data.status === 3) {
          Toast("密码错误");
        }
      });
    };
    return {
      phone,
      back,
      toRegister,
      hint,
      state,
      onSubmit,
      toWechat,
    };
  },
};
</script>

<style lang="less" scoped>
.fastlogin_page {
  header {
    width: 100%;
    height: 60px;
    margin-top: 30px;
    .icon {
      position: absolute;
      top: 44.5px;
      left: 18px;
      width: 60px;
      height: 17px;
      color: #68dcdc;
      font-size: 20px;
      font-weight: 600;
    }
  }
  main {
    position: relative;
    h3 {
      color: #605e62;
      text-align: center;
      font-size: 26px;
      padding-top: 10px;
      margin-bottom: 50px;
    }
    .van-button {
      width: 300px;
      background: #68dcdc;
      border: none;
      border-radius: 5px;
      margin-left: 20px;
    }
    .link_div {
      display: flex;
      margin-bottom: 150px;
      .link_sp {
        flex: 1;
        font-size: 14px;
        font-weight: 600;
        text-align: center;
        color: #504e52;
      }
    }
    .others {
      margin-bottom: 100px;
      .van-divider {
        font-size: 18px;
        font-weight: 600;
      }
      .wechat_logo {
        img {
          width: 87px;
          height: 87px;
          display: block;
          margin: 0 auto;
          border: dashed #504e52;
        }
      }
    }
  }
}
</style>
